<template>
  <div class="container">
    <avue-crud :option="option" :table-loading="loading" :data="data" ref="crud"
      v-model="form" :permission="permissionList" :before-open="beforeOpen"
      @row-del="rowDel" @row-update="rowUpdate" @row-save="rowSave" @on-load="onLoad"
      @selection-change="selectionChange" :page.sync="page" @search-change="searchChange"
      @search-reset="searchReset">
      <template slot="menuLeft">
        <el-button type="danger" size="small" icon="el-icon-delete" plain
          @click="handleDelete">
          删 除
        </el-button>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button type="text" icon="el-icon-plus" size="small"
          @click.stop="handleAdd(scope.row, scope.index)">新增子项
        </el-button>
      </template>
      <template slot-scope="{ row }" slot="icon">
        <div style="text-align: center">
          <i :class="row.icon" />
        </div>
      </template>
    </avue-crud>
  </div>

</template>

<script>
  import {
    getLazyList,
    add,
    update,
    remove
  } from "@/api/venue";
  export default {
    data() {
      return {
        form: {},
        query: {},
        loading: false,
        selectionList: [],
        parentId: 0,
        page: {
          pageSize: 10,
          currentPage: 1,
          total: 0,
        },
        data: [],
        option: {
          columnBtn: false,
          searchShowBtn: false,
          refreshBtn: false,
          tip: false,
          simplePage: true,
          searchShow: true,
          searchMenuSpan: 6,
          dialogWidth: "60%",
          border: true,
          index: true,
          selection: true,
          viewBtn: true,
          menuWidth: 320,
          dialogClickModal: false,
          column: [{
            label: 'ID',
            prop: 'id',
            addDisabled: false,
            editDisabled: false,
            addDisplay: false,
            editDisplay: false
          }, {
            label: '场馆名称',
            prop: 'venName'
          }, {
            label: '运动类型',
            prop: 'motionType'
          }, {
            label: '缩略图',
            prop: 'thumb',
            type: "upload",
            accept: "png/jpg",
            loadText: "图片上传中，请稍等",
            listType: "picture-img",
            rules: [{
              required: true,
              message: "请上传图片",
              trigger: "change",
            }, ],
            propsHttp: {
              // 这里有一个小坑  默认是在res.data下寻找path和filename字段
              // 如果需要指定返回数据下寻找请设置res: xxx到propsHttp下
              url: "link",
              name: 'originalName',
            },
            tip: "只能上传jpg/png文件",
            action: "/framework/workflow/file/put-file",
            row: true,
            span: 14,
          }, {
            label: '省份',
            prop: 'province'
          }, {
            label: '城市',
            prop: 'city'
          }, {
            label: '区级',
            prop: 'area'
          }, {
            label: '详细地址',
            prop: 'address'
          }, {
            label: '场馆负责人/老板',
            prop: 'boss'
          }, {
            label: '场馆电话',
            prop: 'phone'
          }, {
            label: '场馆展示标签(英文,隔开)',
            prop: 'displayLabel'
          }, {
            label: '场馆拓展字段',
            prop: 'venJson'
          }, {
            label: '创建时间',
            prop: 'createTime',
            width: 200,
            addDisabled: false,
            editDisabled: false,
            addDisplay: false,
            editDisplay: false
          }]
        }
      }
    },
    computed: {
      permissionList() {
        return {
          addBtn: true,
          viewBtn: true,
          delBtn: true,
          editBtn: true,
        };
      },
      ids() {
        let ids = [];
        this.selectionList.forEach((ele) => {
          ids.push(ele.id);
        });
        return ids;
      },
    },

    methods: {
      onLoad(page, params = {}) {
        this.loading = true;

        getLazyList({
          current: this.page.currentPage,
          size: this.page.pageSize
        }).then((res) => {
          this.data = res.data.records;
          this.loading = false;
          this.page.total = res.data.total;
          // this.selectionClear();
        });
      },

      initData() {

        getLazyList({
          current: this.page.currentPage,
          size: this.page.pageSize
        }).then((res) => {
          this.data = res.data.records;

          this.page.total = res.data.total;
        });
      },
      beforeOpen(done, type) {
        if (["add", "edit"].includes(type)) {
          this.initData();
        }
        done();
      },
      handleDelete() {
        if (this.selectionList.length === 0) {
          this.$message.warning("请选择至少一条数据");
          return;
        }
        console.log(this.ids, 'this.ids');
        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            return remove(this.ids);
          })
          .then(() => {
            // 刷新表格数据并重载
            this.data = [];
            this.parentId = 0;
            this.$refs.crud.refreshTable();
            this.$refs.crud.toggleSelection();
            // 表格数据重载
            this.onLoad(this.page);
            this.$message({
              type: "success",
              message: "操作成功!",
            });
          });
      },
      rowSave(row, done, loading) {
        console.log(row);
        add(row).then(
          (res) => {
            // 获取新增数据的相关字段
            this.form = {};
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            // 数据回调进行刷新
            this.onLoad();
            done();
          },
          (error) => {
            //console.log(error);
            window.console.log(error);
            loading();
          }
        );
      },
      rowUpdate(row, index, done, loading) {
        update(row).then(
          () => {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            // 数据回调进行刷新
            done();
            this.onLoad();
          },
          (error) => {
            //console.log(error);
            window.console.log(error);
            loading();
          }
        );
      },
      rowDel(row, index, done) {

        this.$confirm("确定将选择数据删除?", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
          .then(() => {
            return remove([row.id]);
          })
          .then(() => {
            this.$message({
              type: "success",
              message: "操作成功!",
            });
            // 数据回调进行刷新
            done(row);
          });
      },
      selectionChange(list) {
        this.selectionList = list;
      },
      selectionClear() {
        this.selectionList = [];
        this.$refs.crud.toggleSelection();
      },
      searchChange(params, done) {
        this.query = params;
        this.page.currentPage = 1;
        this.onLoad(this.page, params);
        done();
      },
      searchReset() {
        this.query = {};
        this.treeDeptId = "";
        this.onLoad(this.page);
      },
    }
  }
</script>

<style>
  .container {
    padding: 16px;
  }

  .avue-input-icon__item {
    padding: 0;
    margin: 10px 20px 0;
  }
</style>
